<template>
	<view class="warrper">
		<view class="fixed">
			<!-- 状态栏 -->
			<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
			<view class="myheader padding-sm flex font-sub-title justify-between">
				<view class="font-sub-title">
					问诊<span v-if="online" >（在线）</span><span v-else style="color: #E33E33">（已离线）</span>
				</view>
				<text v-if="role=='user'" class="cuIcon-roundadd font-sub-title uni-bold" @click="openExtend"></text>
			</view>
			<!-- 扩展菜单 -->
			<free-popup ref="extend"  :bodyWidth="320" :bodyHeight="205"
			bodyBgColor="bg-light-dark" transformOrigin="right top">
				<view class="flex flex-column" 
				style="width: 320rpx;height: 205rpx;">
					<view class="flex-1 flex align-center" 
					v-for="(item,index) in menus"
					:key="index"
					@click="clickEvent(item.event)">
						<text class="iconfont pl-3 pr-2 font-md text-white">{{item.icon}}</text>
						<text class="font-md text-white">{{item.name}}</text>
					</view>
				</view>
			</free-popup>
		</view>
		<view v-if="varList.length==0&&relationList.length==0" class="no_data">
			<image src="../../static/img/no_data.png" class="no_data_img" mode="widthFix"></image>
			<view class="font-sub-title">暂无数据</view>
		</view>
		<view v-else-if="role=='user'" class="cu-list menu sm-border" :style="{marginTop:navHeight}">
			<view class="cu-item bg-white arrow" v-for="data in varList" @tap="jump('/pages/message/chat?username='+data.phone+'med&nickname='+data.name+'&avatar='+ getAvatar(data.avatar))">
				<view class="content padding-tb-sm">
					<view>
						<jy-image placeholder='/static/loading.gif' class="cu-avatar lg" :src="getAvatar(data.avatar)"></jy-image>
						<!-- <view class="cu-avatar lg" :style="{ backgroundImage: 'url(' + getAvatar(data.avatar) + ')'}"></view> -->
						<view class="margin-left">
							<text class="margin-right font-normal">{{data.name}}</text>
							<text class="margin-right font-normal">{{data.position}}</text>
							<text class="margin-right font-normal">{{data.major}}</text>
							<view class="font-small">
								<text class="margin-right">{{data.hospitalName}}</text>
								<text class="text-red" v-if="getUnread(data.phone+'med')>0">{{getUnread(data.phone+'med')}}条未读消息</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-item bg-white arrow" v-for="data in relationList"  @tap="jump('/pages/message/chat?username='+data.phone+'&nickname='+data.name+'&avatar='+ getAvatar(data.avatar))">
				<view class="content padding-tb-sm" >
					<view>
						<jy-image placeholder='/static/loading.gif' class="cu-avatar lg round" :src="getAvatar(data.avatar)"></jy-image>
						<view class="margin-left">
							<text class="margin-right font-normal">{{data.name}}</text>
							<text class="margin-right font-normal">{{data.sex=='1'?'男':'女'}}</text>
							<view class="font-small">
								<text class="margin-right">{{data.city}}{{data.district}}</text>
								<text class="text-red" v-if="getUnread(data.phone)>0">{{getUnread(data.phone)}}条未读消息</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="cu-list menu sm-border" :style="{marginTop:navHeight}">
			<view class="cu-item bg-white arrow" v-for="data in varList"  @tap="jump('/pages/message/chat?username='+data.phone+'&nickname='+data.name+'&avatar='+ getAvatar(data.avatar))">
				<view class="content padding-tb-sm" >
					<view>
						<jy-image placeholder='/static/loading.gif' class="cu-avatar lg round" :src="getAvatar(data.avatar)"></jy-image>
						<view class="margin-left">
							<text class="margin-right font-normal">{{data.name}}</text>
							<text class="margin-right font-normal">{{data.sex=='1'?'男':'女'}}</text>
							<view class="font-small">
								<text class="margin-right">{{data.city}}{{data.district}}</text>
								<text class="text-red" v-if="getUnread(data.phone)>0">{{getUnread(data.phone)}}条未读消息</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from '@/common/lib/md5.min.js'
	import _config from '@/config/index.js'
	import freePopup from "@/components/free-ui/free-popup2.vue"
	import {
		mapGetters
	} from 'vuex'
	var that;
	export default {
		name: "Message",
		created() {
		},
		components:{
			freePopup
		},
		computed:{
			...mapGetters(['navHeight']),
		},
		data() {
			return {
				varList:[],
				menus:[
					{
						name:"签约护士",
						event:"signNurse",
						icon:"\ue605"
					},
					{
						name:"签约医生",
						event:"signDoctor",
						icon:"\ue604"
					}
				],
				isShow:false,
				user:'',
				online:'',
				myUsername:'',
				relationList:[],
				role:uni.getStorageSync("role"),
				statusBarHeight:Vue.prototype.StatusBar
			}
		},
		onShow(){
			this.user = uni.getStorageSync("userInfo")
			that.myUsername = this.user.PHONE
			that.$forceUpdate()
			uni.hideTabBarRedDot({
				index:1
			})
			this.online=uni.getStorageSync("isConnect")
			if(!that.online){
				this.$store.dispatch('WEBSOCKET_INIT');
			}
		},
		onLoad() {
			that =this;
			this.user = uni.getStorageSync("userInfo")
			uni.$on("get_unread",function(){
				that.$forceUpdate()
			})
			this.getData()
		},
		onUnload() {
			uni.$off('get_unread')
		},
		onPullDownRefresh() {
			this.$store.dispatch('WEBSOCKET_INIT');
			setTimeout(function(){
				that.online=uni.getStorageSync("isConnect")
			},1000)
			this.getData();
		},
		methods: {
			openExtend() {
				this.$refs.extend.show(uni.upx2px(415),uni.upx2px(165))
			},
			clickEvent(e){
				switch (e){
					case 'signNurse':
						that.$refs.extend.hide()
						uni.navigateTo({
							url:'/pages/signDoctor/nurse'
						})
						break;
					case 'signDoctor':
						that.$refs.extend.hide()
						uni.navigateTo({
							url:'/pages/signDoctor/index'
						})
						break;
				}
			},
			getUnread(username){
				return uni.getStorageSync(username)||0;
			},
			getAvatar(avatar){
				return avatar?avatar:_config.NGINX_SERVER+'imgs/avatar/avatar.jpg'
			},
			jump(path) {
				uni.navigateTo({
					url: path
				})
			},
			getData(){
				that.varList = []
				that.relationList = []
				if(this.role=="user"){
					this.$http.getMessageList().then((res)=>{
						uni.stopPullDownRefresh()
						if(res.code==1){
							that.varList = res.result.signedMedicalStaffList
							that.relationList = res.result.relationList
							that.getUnread()
						}else{
							uni.showToast({
								"title":res.message,
								"position":"bottom",
								"icon":"none"
							})
						}
					})
				}else{
					this.$http.getMedicalStaffMessageList().then((res)=>{
						uni.stopPullDownRefresh()
						if(res.code==1){
							that.varList = res.result
						}else{
							uni.showToast({
								"title":res.message,
								"position":"bottom",
								"icon":"none"
							})
						}
					})
				}
				
			}
		}
	}
</script>

<style scoped>
	/* tab start */
	.tui-tabs-view {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 9999;
	}
	.cu-avatar{
		border-radius: 5px;
	}

	.tui-tabs-relative {
		position: relative;
	}

	.tui-tabs-fixed {
		position: fixed;
		left: 0;
	}

	.tui-tabs-fixed::before,
	.tui-tabs-relative::before {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tui-unlined::before {
		border-bottom: 0 !important
	}

	.tui-tabs-item {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-tabs-disabled {
		opacity: .6;
	}

	.tui-tabs-title {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 2;
	}

	.tui-tabs-active {
		transition: all 0.15s ease-in-out;
	}

	.tui-tabs-slider {
		border-radius: 40rpx;
		position: absolute;
		left: 0;
		transition: all 0.15s ease-in-out;
		z-index: 0;
	}
	.cu-item{
		height: 130rpx;
	}
	.no_data{
		margin-top: 150rpx;
	}
	.no_data_img{
		margin-top: 150rpx;
	}
	/* tab end */
</style>
